<template>
  <el-form v-loading="loading" label-width="80px" label-position="right">
<!--    <el-form-item v-if="!excelTemplate.docxPath" label-width="0">
      <el-empty description="请到设置中心先上传docx模板"></el-empty>
    </el-form-item>-->
    <el-row :gutter="8">
      <el-col :span="8">
        <el-form-item label="项目名称">
          <el-input v-model="report.projectName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="报告编号">
          <el-input v-model="report.reportNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="批次编号">
          <el-input v-model="report.batchNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="包件号">
          <el-input v-model="report.packNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="样品名称">
          <el-input v-model="report.sampleName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="委托单位">
          <el-input v-model="report.orderClient"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="土地类型">
          <el-input v-model="report.soilType"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item style="text-align: center;">
      <el-upload
          ref="uploadRef"
          show-file-list
          :action="uploadUrl"
          :multiple="true"
          :limit="20"
          :auto-upload="false"
          :file-list="fileList"
          :http-request="httpRequest"
          :on-change="fileChange"
          :on-remove="fileChange"
          accept=".xlsx,.docx"
      >
        <el-button :loading="uploading" slot="trigger" icon="el-icon-upload" size="small" type="primary">选取文件</el-button>
        <el-button v-if="fileList.length > 0" :loading="uploading" icon="el-icon-s-opportunity" style="margin-left: 10px;" size="small" type="success" @click="httpRequest">生成报告</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
import { execute } from "@/utils/RequestUtil";

export default {
  name: "DocxReport",
  props: {
    excelTemplate: {
      type: Object,
      default: function () {
        return { sheets: [], excelOut: {} }
      }
    }
  },
  data() {
    return {
      loading: false,
      report: { reportNo: 'SJ301230100003-ZK', projectName: '2023年贵州省第三次土壤普查第一期土壤样品检测化验（包三）', packNo: '231123073703b',
        sampleName: '土壤 一般样品', orderClient: '贵州省农业农村厅',  soilType: '耕地园林', batchNo: '231123073703b' },
      fileList: [],
      uploading: false
    }
  },
  computed: {
    uploadUrl () {
      return this.$Util.mergeUrl(process.env.VUE_APP_BASE_API, '/excelTemplate/createReport/' + this.excelTemplate.excelId)
    },
    uploadHeader(){
      return { Authorization: 'Bearer ' + this.$AuthStorage.getAccessToken() }
    }
  },
  methods: {
    fileChange(file, files) {
      this.fileList.splice(0, this.fileList.length)
      files.forEach(item => {
        this.fileList.push(item)
      })
      console.info('change', file, files)
    },
    httpRequest(){
      if (this.fileList.length === 0) {
        this.$resultMsg(this, { msg: '请选择excel文件'})
        return
      }
      this.uploading = true
      const formData = new FormData();
      this.fileList.map((file) => {
        formData.append('files', file.raw)
      })
      const keys = Object.keys(this.report)
      keys.forEach(key => {
        formData.append(key, this.report[key])
      })
      execute({
        url: '/excelTemplate/createReport/' + this.excelTemplate.excelId,
        method: 'post',
        contentType: 'multipart/form-data',
        data: formData
      }).then(res => {
        this.uploadSuccess(res)
      })
    },
    uploadSuccess (res) {
      this.$resultMsg(this, res)
      if (res.code === 200 && res.data) {
        const { base64, name } = res.data
        let raw = window.atob(base64) // 解码base64得到二进制字符串
        let rawLength = raw.length
        let uInt8Array = new Uint8Array(rawLength) // 创建8位无符号整数值的类型化数组
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i) // 数组接收二进制字符串
        }
        const blob = new Blob([uInt8Array], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
        const downloadElement = document.createElement('a')
        let href = blob
        if (typeof blob === 'string') {
          downloadElement.target = '_blank'
        } else {
          href = window.URL.createObjectURL(blob) // 创建下载的链接
        }
        downloadElement.href = href
        downloadElement.download = name // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 触发点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        if (typeof blob !== 'string') {
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        }
      }
      this.uploading = false
    },
  }
}
</script>

<style scoped>

</style>